<html>
<head>
    <title>运维统计</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">
    <style>
        body {
            background: #F2F2F2;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 300px;
            width: 90%;
        }

        .tab-title {
            margin-top: 20px;
            text-align: center;
            font-size: larger;
            color: #333333;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="page" id="page-monitor">
        <div class="page-title"> 综合月报</div>
        <div class="page-main">
            <el-row>
                <el-col :span="4">
                    <dev-tree ref="devTree" v-on:click-node="aa" :tabsign="'u'"></dev-tree>
                </el-col>
                <el-col :span="20">
                    <div class="main-head">
                        <el-form :inline="true">
                            <el-form-item label="">
                                    <el-date-picker type="month" v-model="day" value-format="yyyy-MM" placeholder="日期" style="width: 150px;"></el-date-picker>
                            </el-form-item>
                            <el-form-item>
                                <el-tooltip effect="dark" content="请点击左边树中区域或设备" v-model="tooltip" placement="right">
                                    <el-button type="primary" @click="search" style="background: #578BBB">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <p class="tab-title">告警统计</p>
                    <el-table border stripe style="width: 100%" :data="alarmData">
                        <el-table-column prop="groupName" label="告警类型" align="center">
                        </el-table-column>
                        <el-table-column prop="errorCount" label="告警总数" align="center">
                        </el-table-column>
                        <el-table-column prop="process" label="告警已处理数" align="center">
                        </el-table-column>
                        <el-table-column prop="noprocess" label="告警未处理数" align="center">
                        </el-table-column>
                        <el-table-column prop="received" label="告警已接收未处理数" align="center">
                        </el-table-column>
                        <el-table-column prop="DeviceName" label="告警数最多设备名称" align="center">
                        </el-table-column>
                    </el-table>
                    <p class="tab-title">巡检统计</p>
                    <el-table border stripe style="width: 100%" :data="patrolexcuteData">
                        <el-table-column prop="userName" label="巡检人员" align="center">
                        </el-table-column>
                        <el-table-column prop="Telephone" label="联系方式" align="center">
                        </el-table-column>
                        <el-table-column prop="count" label="总处理数" align="center">
                        </el-table-column>
                        <el-table-column prop="process" label="已处理数" align="center">
                        </el-table-column>
                        <el-table-column prop="noprocess" label="未处理数" align="center">
                        </el-table-column>
                        <el-table-column prop="received" label="已接收未处理数" align="center">
                        </el-table-column>
                        <el-table-column prop="overtime" label="超时已处理数" align="center">
                        </el-table-column>
                    </el-table>
                    <p class="tab-title">维修统计</p>
                    <el-table border stripe style="width: 100%" :data="repairData">
                        <el-table-column prop="userName" label="维修人员" align="center">
                        </el-table-column>
                        <el-table-column prop="Telephone" label="联系方式" align="center">
                        </el-table-column>
                        <el-table-column prop="count" label="总处理数" align="center">
                        </el-table-column>
                        <el-table-column prop="process" label="已处理数" align="center">
                        </el-table-column>
                        <el-table-column prop="noprocess" label="未处理数" align="center">
                        </el-table-column>
                        <el-table-column prop="received" label="已接收未处理数" align="center">
                        </el-table-column>
                        <el-table-column prop="overtime" label="超时已处理数" align="center">
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </div>
    </div>
    <script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
    <script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
    <!--<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>-->
    <script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
    <script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>
    <script>
        var vuePage = new Vue({
            el: '#page-monitor',
            data: {
                currentId: '',
                alarmData: [], //告警数据
                patrolexcuteData: [], //巡检数据
                repairData: [], //故障数据
                tooltip: false
            },
            created: function () {
                this.day = TimeUtil.convertToString(new Date()).substr(0, 7);
            },
            mounted: function () {
                this.eleCount = [];
                this.paramData = [];
            },
            methods: {
                search: function () {
                    if (!this.currentId) {
                        this.tooltip = true;
                        return;
                    }
                    this.getTabData();
                },
                aa: function (data) {
                    this.currentId = data.id;
                    this.getTabData();
                },
                getTabData: function () {
                    var ids = this.currentId.split('_');
                    var dArr = this.day.split('-');
                    var param = {
                        UserId: [ids[1]].join(','),
                        year: dArr[0] || 0,
                        month: dArr[1] || 0,
                        pagesize: 100
                    };
                    // 该用户告警统计
                    HttpUtil.get('Statistics/AlarmStatistics', param).success((res) => {
                        vuePage.alarmData = res.data;
                    });
                    var paramP = {
                        UserId: [ids[1]].join(','),
                        year: dArr[0] || 0,
                        month: dArr[1] || 0,
                        pagesize: 100
                    };
                    // 该用户巡检统计
                    HttpUtil.get('Statistics/RepairAndPatrolexcute', paramP).success((res) => {
                        vuePage.patrolexcuteData = res.data;
                    });
                    var paramR = {
                        UserId: [ids[1]].join(','),
                        year: dArr[0] || 0,
                        month: dArr[1] || 0,
                        wf_objType: 7,
                        pagesize: 100
                    };
                    // 该用户故障统计
                    HttpUtil.get('Statistics/RepairAndPatrolexcute', paramR).success((res) => {
                        vuePage.repairData = res.data;
                    });
                },
            },
        });
    </script>
</body>
</html>
